//<template>
  <div>
    <!-- <el-button type="text" @click="centerDialogVisible = true">点击打开 Dialog</el-button> -->
    <el-button type="primary" @click="tj">添加</el-button>
    <el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  >
 <el-form ref="form" :model="form" label-width="80px"> 

  <el-form-item label="id">
    <el-input v-model="form.id"></el-input>
  </el-form-item>
  <el-form-item label="姓名">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="地址">
    <el-input v-model="form.city"></el-input>
  </el-form-item>
  <el-form-item label="标签">
    <el-input v-model="form.title"></el-input>
  </el-form-item>
 </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

     <template>
    <el-table
      :data="tableData"
      style="width: 100%," >
      <el-table-column  class="aa"
        prop="id"
        label="id"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="city"
        label="地址">
      </el-table-column>
       <el-table-column
        prop="title"
        label="信息">
      </el-table-column>
        <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
        <el-button @click="handlebj(scope.row)"  type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>
    </el-table>
  </template>
  </div>
</template>

<script>
import axios from 'axios'
import '../../api/list'
export default {
data() {
    return {
        tableData: [],    centerDialogVisible: false,
        dialogVisible:false,
         form: {
          name: '',
          id: '',
          city: '',
          id: '',
      
        }
    }
},created(){
    axios.get('/list', {
      params: {}
    }).then((ret) => {
      console.log(ret.data.list)
      this.tableData=ret.data.list
    })
},
   methods: {
      handleClick(row) {
        console.log(row);
         this.tableData.forEach((item,index) => {
            if(item.id===row.id){
                 this.tableData.splice(index, 1)
            }
         })
      },handlebj(row){
        console.log(1);
           this.dialogVisible=true
           this.form=row
      },
      tj(){
         this.dialogVisible=true
          this.form= {
          name: '',
          id: '',
          city: '',
          id: '',
      
        }
    this.tableData.unshift(this.form)
      }
    },
}
</script>

<style>

</style>